<template>
	<view class="all">
		<view style="width: 100%;height: 90rpx;"></view>
		<view class="hearder-cont">
			<view class="hearder-left" @click="back">
				返回
			</view>
			<view class="hearder-center">
				<view class="search" >
					<image src="../../static/icon/search.png" mode=""></image>
					<input type="text" placeholder="请输入..." placeholder-style="color: #FFFFFF;" v-model="searchText"/>
				</view>
			</view>
			<view class="hearder-right">
				<text @click="search" >搜索</text>
			</view>
		</view>
		<!-- 轮播占位 -->
		<view class="image-item"></view>
		<view class="shop">
			<view class="shop-list">
				<view class="shop-item" v-for="item in shopList" @click="shopClick(item)">
					<image :src="item.image" mode=""></image>
					<view class="title">
						{{item.title}}
					</view>
					<view class="price" style="color: #DC7633;">
						<text style="margin-left: 10rpx;">￥</text>
						<text>{{item.price}}</text>
					</view>
					<view class="store" style="font-size: 24rpx;color: #AAB7B8;">
						<view style="margin-left: 10rpx;" v-if="item.store!=null">店铺：{{item.store}}</view>
						<view style="margin-left: 10rpx;" v-if="item.store==null">店铺：商城制造</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import http from "../../util/httpRequest.js" 
	import Shoplist from "../index/common/shop-list.vue"
	import store from "../../store/index.js"
	export default{
		components:{
			Shoplist
		},
		data(){
			return{
				searchText:null,
				shopList:[]
			}
		},
		computed:{
			
		},
		methods:{
			
			search(){
				var that = this
				uni.showLoading({title: '商品加载中'});
				console.log(this.searchText)
				uni.request({
					url:http.productUrl+"product/spu/searchtitle",
					method:"POST",
					data:that.searchText,
					success(res) {
						if(res.data.code==0){
							uni.hideLoading();
							that.shopList=res.data.list
						}
					}
				})
			},
			// 商品点击后
			shopClick(shopItem){
				var that = this
				uni.showLoading({title: '商品加载中'});
				// console.log("数据",shopItem)
				uni.request({
					url:http.productUrl+"uni/getShop",
					method:"POST",
					data:{
						id:shopItem.id
					},
					success(res) {
						console.log(res.data.data)
						uni.hideLoading();
						//放到缓存内
						store.commit("shopData",res.data.data)
						//放图片
						store.commit("shopImg",res.data.data.image)
						//存放返回上一级路由,当前路由
						uni.reLaunch({
							url:"shop"
						})
						
						
					}
				})
				
			},
			getShopList(){
				var that = this
				uni.request({
					url: http.productUrl+'uni/getSpuByTab',
					method: 'POST',
					data: {
						tab: "首页"
					},
					
					  success: (res) => {
							console.log(res)
					        that.shopList = res.data.list
					  }
				})
			},
			back(){
				uni.reLaunch({
					url:store.state.common.router,
				})
			}
		},
		created() {
			this.getShopList()
		}
		
	}
</script>

<style scoped>
	.all{
		width: 100%;
		/* height: 100%; */
		background-color: #E9E8E6;
	}
	.hearder-cont{
		position: fixed;
		top: 0;
		display: flex;
		width: 100%;
		height: 90rpx;
		background-color: #FFFFFF
	}
	.hearder-left{
		line-height: 90rpx;
		text-align: center;
		width: 20%;
		height: 90rpx;
		/* background-color: #F5B041 */
	}
	.hearder-center{
		width: 60%;
		height: 90rpx;
		/* background-color: #17A589 */
	}
	.hearder-right{
		width: 20%;
		height: 90rpx;
		line-height: 90rpx;
		/* background-color: #EC7063 */
	}
	.search{
		display: flex;
		margin: 7rpx auto 0 auto;
		width: 95%;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #52ACFF;
		background-image: linear-gradient(68deg, #52ACFF 25%, #34ff2c 100%);
	
	}
	.search>image{
		margin-top: 5rpx;
		margin-left: 10rpx;
		width: 70rpx;
		height: 70rpx;
	}
	.search>input{
		height: 80rpx;
		line-height: 80rpx;
		color: #FFFFFF;
	}
	.image-item{
		margin-top: 15rpx;
		width: 100%;
		height: 200rpx;
		background-color: #007AFF
	}
	.shop{
		width: 100%;
		/* height: 1100rpx; */
		background-color:#E9E8E6;
	}
	.shop-list{
		display: flex;
		flex-flow: wrap;
		margin: 20rpx auto;
		width: 95%;
		/* height: 1000rpx; */
		/* background-color: #007AFF */
		
	}
	.shop-item{
		margin-top: 15rpx;
		margin-left: 23rpx;
		width: 45%;
		border-radius: 15rpx;
		background-color: #FFFFFF;
	}
	.shop-item>image{
		/* border-radius: 15rpx; */
		border-top-right-radius:15rpx;
		border-top-left-radius:15rpx;
		width: 100%;
	}
	.title{
		font-size: 26rpx;
		display:-webkit-box;
		/* color: ; */
		-webkit-line-clamp:2;
		overflow:hidden;
		text-indent:20rpx;
		text-overflow:ellipsis;
		-webkit-box-orient:vertical;
		word-break:break-all;
	}
</style>
